<template>
  <div>
    <!-- 表格1 -->
    <div class="item">
      <el-form>
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">回收商品列表</span>
        </div>
        <lb-table
          ref="lbTable"
          border
          highlight-current-row
          element-loading-text="加载中"
          :column="tableData01.column"
          :data="recycleGoodsList"
          :pagination="false"
          :summary-method="getSummariesRecycle"
          show-summary
        />
      </el-form>
    </div>

    <!-- 表格2 -->
    <div class="item">
      <el-form>
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">置换商品列表</span>
        </div>
        <lb-table
          ref="lbTable"
          border
          highlight-current-row
          element-loading-text="加载中"
          :column="tableData02.column"
          :data="substituteGoodsList"
          :summary-method="getSummariesRecycle"
          :pagination="false"
          show-summary
        />
      </el-form>
    </div>
    <!-- 红字 -->
    <div class="red">
      <div class="red01">
        费用金额：{{ cost }}
      </div>
      <div>
        费用金额 = 置换合计 - 回收合计，正数表示收入，负数表示支出
      </div>
    </div>
  </div>
</template>

<script>
  import { queryMap } from '@/api'
  import { keepDotLength } from '@/utils/math'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    name: 'NoEditableTable',
    props: {
      temp: {
        type: Object
      }
    },
    data() {
      return {
        gdStatusMapOrigin: [],
        gdStatusMap: [],
        tableData01: {
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              prop: 'gtName',
              label: '商品分类',
              width: 180
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 180
            },
            {
              prop: 'specName',
              label: '规格型号',
              width: 100
            },
            {
              prop: 'gdStatus',
              label: '状态',
              width: 110,
              render: (h, { row }) => {
                const arr = this.gdStatusMap.filter(item => item.value === row.gdStatus)
                if (arr.length) {
                  return <span>{arr[0].desc}</span>
                } else {
                  return ''
                }
              }
            },
            {
              prop: 'unitName',
              label: '单位',
              align: 'center',
              width: 50
            },
            {
              prop: 'goodsCount',
              align: 'right',
              label: '回收数量'
            },
            {
              prop: 'netWeight',
              align: 'right',
              label: '回收重量'
            },
            {
              prop: 'price',
              align: 'right',
              label: '回收单价'
            },
            {
              prop: 'amount',
              align: 'right',
              label: '回收总价'
            }
          ]
        },
        tableData02: {
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              prop: 'gtName',
              label: '商品分类',
              width: 180
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 180
            },
            {
              prop: 'specName',
              label: '规格型号',
              width: 100
            },
            {
              prop: 'gdStatus',
              label: '状态',
              width: 110,
              render: (h, { row }) => {
                const arr = this.gdStatusMap.filter(item => item.value === row.gdStatus)
                if (arr.length) {
                  return <span>{arr[0].desc}</span>
                } else {
                  return ''
                }
              }
            },
            {
              prop: 'unitName',
              label: '单位',
              align: 'center',
              width: 50
            },
            {
              prop: 'goodsCount',
              align: 'right',
              label: '置换数量'
            },
            {
              prop: 'netWeight',
              align: 'right',
              label: '置换重量'
            },
            {
              prop: 'price',
              align: 'right',
              label: '置换单价'
            },
            {
              prop: 'amount',
              align: 'right',
              label: '置换总价'
            }
          ]
        }
      }
    },
    computed: {
      // 费用金额
      cost: function() {
        const recycleAmount = this.recycleGoodsList.reduce((pre, cur) => pre + cur.amount, 0)
        const replaceAmount = this.substituteGoodsList.reduce((pre, cur) => pre + cur.amount, 0)
        return Number((replaceAmount || 0) - (recycleAmount || 0)).toFixed(2)
      },
      recycleGoodsList: function() {
        if (this.temp.recycleGoodsList) return this.temp.recycleGoodsList
        return []
      },
      substituteGoodsList: function() {
        if (this.temp.substituteGoodsList) return this.temp.substituteGoodsList
        return []
      }
    },
    created() {
      this.getData()
    },
    methods: {
      async getData() {
        // this.getGoodsTypeListAll(),
        await Promise.all([this.queryOptionsMap()])
      },
      // 合计方法
      getSummariesRecycle(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 2) {
            sums[index] = '合计'
            return
          }
          if (['gtId', 'specName', 'gdStatus', 'unitName', 'price'].includes(column.property)) {
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          }
        })
        if (!sums[6]) sums[6] = (0).toFixed(2) // 回收数量
        if (!sums[7]) sums[7] = (0).toFixed(2) // 回收重量
        sums[7] = Number(sums[7]).toFixed(2)
        sums[9] = sums[9] ? Number(sums[9]).toFixed(2) : (0).toFixed(2)
        return sums
      },
      inputFormat(e) {
        e.target.value = keepDotLength(e.target.value)
      },
      // 查询枚举
      async queryOptionsMap() {
        const res = await mergeAsyncFunc(queryMap, { enumName: 'GdStatus' })
        this.gdStatusMap = res.data // 商品状态
        this.gdStatusMapOrigin = res.data // 商品状态
      }
    }
  }
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}
.red {
  margin-top: 10px;
  color: red;
  .red01 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
